<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

  <head>

  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  	<meta http-equiv="x-ua-compatible" content="ie=edge">

  	<title>宠物</title>
  	<link rel="shortcut icon" href="assets/images/favourite_icon.svg">

  	<!-- fraimwork - css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

    <!-- icon font - css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/fontawesome.css">
    <link rel="stylesheet" type="text/css" href="assets/css/stroke-gap-icons.css">
    <link rel="stylesheet" type="text/css" href="assets/css/icofont.css">

    <!-- animation - css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/animate.css">

    <!-- carousel - css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/slick.css">
    <link rel="stylesheet" type="text/css" href="assets/css/slick-theme.css">

    <!-- popup - css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/magnific-popup.css">

    <!-- jquery-ui - css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/jquery-ui.css">

    <!-- select option - css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/nice-select.css">

    <!-- custom - css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <style>
      .item_image img {
        width: 200px; /* 设置宽度 */
        height: 150px; /* 设置高度 */
        object-fit: cover; /* 控制图片填充方式，保持纵横比并裁剪不必要部分 */
      }
    </style>
  </head>


  <body>

    <!-- body_wrap - start -->
    <div class="body_wrap">

      <!-- backtotop - start -->
      <div class="backtotop">
        <a href="#" class="scroll">
          <i class="far fa-arrow-up"></i>
        </a>
      </div>
      <!-- backtotop - end -->

      <!-- preloader - start -->
      <div id="preloader"></div>
      <!-- preloader - end -->

      <!-- header_section - start
      ================================================== -->
      <div th:replace="~{pet/common::common_header}"></div>
      <!-- header_section - end
      ================================================== -->

      <!-- main body - start
      ================================================== -->
      <main>

        <!-- sidebar cart - start
        ================================================== -->
        <div class="sidebar-menu-wrapper">
          <div class="cart_sidebar">
            <button type="button" class="close_btn"><i class="fal fa-times"></i></button>

            <ul class="cart_items_list ul_li_block mb_30 clearfix">
              <li>
                <div class="item_image">
                  <img src="assets/images/cart_img_1.webp" alt="Getyootech - Gadgets Ecommerce Site Template">
                </div>
                <div class="item_content">
                  <h4 class="item_title">Yellow Blouse</h4>
                  <span class="item_price">$30.00</span>
                </div>
                <button type="button" class="remove_btn"><i class="fal fa-trash-alt"></i></button>
              </li>
              <li>
                <div class="item_image">
                  <img src="assets/images/cart_img_2.webp" alt="Getyootech - Gadgets Ecommerce Site Template">
                </div>
                <div class="item_content">
                  <h4 class="item_title">Yellow Blouse</h4>
                  <span class="item_price">$30.00</span>
                </div>
                <button type="button" class="remove_btn"><i class="fal fa-trash-alt"></i></button>
              </li>
              <li>
                <div class="item_image">
                  <img src="assets/images/cart_img_1.webp" alt="Getyootech - Gadgets Ecommerce Site Template">
                </div>
                <div class="item_content">
                  <h4 class="item_title">Yellow Blouse</h4>
                  <span class="item_price">$30.00</span>
                </div>
                <button type="button" class="remove_btn"><i class="fal fa-trash-alt"></i></button>
              </li>
            </ul>

            <ul class="total_price ul_li_block mb_30 clearfix">
              <li>
                <span>Subtotal:</span>
                <span>$90</span>
              </li>
              <li>
                <span>Vat 5%:</span>
                <span>$4.5</span>
              </li>
              <li>
                <span>Discount 20%:</span>
                <span>- $18.9</span>
              </li>
              <li>
                <span>Total:</span>
                <span>$75.6</span>
              </li>
            </ul>

            <ul class="btns_group ul_li_block clearfix">
              <li><a class="btn btn_primary" href="cart.html">View Cart</a></li>
              <li><a class="btn btn_secondary" href="res.html">Checkout</a></li>
            </ul>
          </div>

          <div class="cart_overlay"></div>
        </div>
        <!-- sidebar cart - end
        ================================================== -->

        <!-- breadcrumb_section - start
        ================================================== -->
        <div class="breadcrumb_section">
          <div class="container" >
            <ul class="breadcrumb_nav ul_li">
              <li><a href="/index">主页</a></li>
              <li>宠物领养</li>
            </ul>
          </div>
        </div>
        <!-- breadcrumb_section - end
        ================================================== -->

        <!-- blog_section - start
        ================================================== -->
        <section class="blog_section section_space">
          <div class="container" style="max-width: 1500px">
            <div class="row justify-content-center">
              <div class="col col-lg-16">
                <div class="row">
                  <div class="col col-md-3 col-sm-3" th:each="pet:${info.getList()}">
                    <div class="bolg_standard">
                      <a class="item_image" href="blog_details.html" th:href="@{/pet/{id}(id=${pet.getId()})}">
                        <img src="assets/images/blog_5.webp" th:src="${pet.getImg()}" alt="Getyootech - Gadgets Ecommerce Site Template">
                      </a>
                      <div class="item_content">
                        <ul class="post_meta ul_li">
                          <li>[[${#dates.format(pet.getCreateTime(), 'yyyy-MM-dd HH:mm:ss')}]]</li>
<!--                          <li><a href="#!">admin</a></li>-->
<!--                          <li>-->
<!--                            <ul class="category_list ul_li">-->
<!--                              <li><a href="#!">Company</a></li>-->
<!--                              <li><a href="#!">Image</a></li>-->
<!--                              <li><a href="#!">Travel</a></li>-->
<!--                            </ul>-->
<!--                          </li>-->
                        </ul>
                        <h3 class="item_title">
                          <a href="blog_details.html" th:href="@{/pet/{id}(id=${pet.getId()})}">[[${pet.getTitle()}]]</a>
                        </h3>
                        <p>
                          [[${pet.getIntro()}]]
                        </p>
                        <a class="btn btn_gray" href="blog_details.html" th:href="@{/pet/{id}(id=${pet.getId()})}">查看详情</a>
                      </div>
                    </div>
                  </div>



                </div>

                <div class="pagination_wrap p-0">
                  <ul class="pagination_nav ul_li">
                    <li th:each="num : ${info.navigatepageNums}" th:class="${num == currentPage} ? 'active' : ''">
                      <a th:href="@{/adopt(page=${num})}" href="#!">[[${num}]]</a>
                    </li>
                    <li class="prev_btn"  th:if="${info.hasPreviousPage}"><a href="#!" th:href="@{/events(page=${info.prePage})}"><i class="fa-regular fa-angle-left"></i></a></li>
                    <li class="next_btn"  th:if="${info.hasNextPage}"><a th:href="@{/adopt(page=${nextPage})}" href="#!"><i class="fa-regular fa-angle-right"></i></a></li>
                  </ul>
                </div>
              </div>

            </div>
          </div>
        </section>
        <!-- blog_section - end
        ================================================== -->

        <!-- newsletter_section - start
        ================================================== -->
        <!-- newsletter_section - end
        ================================================== -->

      </main>
      <!-- main body - end
      ================================================== -->

      <!-- footer_section - start
      ================================================== -->
      <!-- footer_section - end
      ================================================== -->

    </div>
    <!-- body_wrap - end -->

    <!-- fraimwork - jquery include -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/bootstrap5-dropdown-ml-hack.js"></script>

    <!-- carousel - jquery include -->
    <script src="assets/js/slick.min.js"></script>

    <!-- popup - jquery include -->
    <script src="assets/js/magnific-popup.min.js"></script>

    <!-- jquery-ui - jquery include -->
    <script src="assets/js/jquery-ui.js"></script>

    <!-- off canvas sidebar - jquery include -->
    <script src="assets/js/mCustomScrollbar.js"></script>

    <!-- select option - jquery include -->
    <script src="assets/js/nice-select.min.js"></script>

    <!-- countdown timer - jquery include -->
    <script src="assets/js/countdown.js"></script>

    <!-- counter up - jquery include -->
    <script src="assets/js/counterup.min.js"></script>
    <script src="assets/js/waypoints.min.js"></script>

    <!-- custom - jquery include -->
    <script src="assets/js/main.js"></script>

  </body>
</html>